@import '../../css/Variable.styl'

.progress
  width 150px
  height 150px
  line-height 150px
  background none
  margin 0 auto
  position relative


.progress > span
  width 50%
  height 100%
  overflow hidden
  position absolute
  top 0
  z-index 1

.progress .progress-bar
  width 100%
  height 100%
  background none
  border-width 12px
  border-style solid
  position absolute
  top 0

.progress .progress-left .progress-bar
  border-start-end-radius 80px
  border-end-end-radius 80px
  border-inline-start 0

.progress .progress-value
  display flex
  justify-content center
  align-items center
  width 90%
  height 90%
  border 10px solid offWhite
  border-radius 50%
  font-size titleFontSize
  color offWhite
  line-height 135px
  text-align center
  position absolute
  top 5%
  left 5%

.progress.colored .progress-bar
  border-color lightGrey1

.progress .progress-right .progress-bar
  border-start-start-radius 80px
  border-end-start-radius 80px
  border-inline-end 0

// INFO - RJ - 2022-02-01 -
// the right ⟷ left changes in [dir=rtl] blocks below fix the broken appearance
// of the progress bar for RTL languages, but make the progress go from
// south, to west, to north, to west, to south.
// Arabic clocks still turn clockwise, from the top, so lets reflect that by
// rotating this.
// https://marvelapp.com/blog/mirroring-designing-for-arab-users/
[dir=rtl] .progress
  transform rotate(180deg)
  .progress-value
    transform rotate(180deg)
  .progress-left
    right 0
    .progress-bar
      right 100%
      transform-origin center right
      border-top-left-radius 80px
      border-bottom-left-radius 80px
  .progress-right
    left 0
    .progress-bar
      right -100%
      transform-origin center left
      border-top-right-radius 80px
      border-bottom-right-radius 80px

[dir=ltr] .progress
  .progress-left
    left 0
    .progress-bar
      left 100%
      transform-origin center left
      border-top-right-radius 80px
      border-bottom-right-radius 80px

  .progress-right
    right 0
    .progress-bar
      left -100%
      transform-origin center right
      border-top-left-radius 80px
      border-bottom-left-radius 80px

// INFO - GB and RJ - 2022-01-27 - border-{top,bottom}-{left,right}-radius
// properties are fallbacks because border-start-end-radius, border-end-start-radius
// border-start-start-radius and border-end-end-radius are new and have a global
// support below 90% according to https://caniuse.com/.
// When the global support is higher, we can delete the fallbacks.
